<template>
 <div class="home">
  <div id="allmap" class="allmap"></div>
  <!-- 增改组件 -->
		<add-or-update ref="add-or-update"></add-or-update>
 </div>
</template>

<script>
 import BMap from 'BMap'
 import addOrUpdate from './query-table-case-add.vue';
 export default {
  components: {
			addOrUpdate
		},
  data () {
   return {
    type: 'tab',
    address_detail: null,
    center: {lng: 108.954338, lat: 34.323069},//lun经度，lat纬度
    overlays: [],
    parks: [],
    uid: localStorage.getItem("uid"),
    title: 1,
    formType: 0,
    value: 3
   }
  },
  mounted () {
      this.begin();
  },
  methods: {
    begin(){
        let that = this;
        let map = new BMap.Map('allmap') //创建地图实例
        let point = new BMap.Point(this.center.lng, this.center.lat) // 创建点坐标
        map.centerAndZoom(point, 20) //初始化地图，并设置中心点坐标和地图缩放级别
        map.enableScrollWheelZoom(true) //启用滚轮放大缩小，默认禁用

        var myIcon = new BMap.Icon(require('./位置.png'), new BMap.Size(32, 32));//创建图标图片大小
        var mylocation = new BMap.Point(108.954365, 34.323095);//设置图标坐标
        var marker = new BMap.Marker(mylocation, {icon: myIcon});//在图标的基础上获得标记
        map.addOverlay(marker); //将标注添加到地图
        marker.addEventListener('click', function () {//添加该标记的点击事件
          // that.$refs['add-or-update'].open(that.uid,park);
          alert("您的位置!")
        });
        //发送请求，收到经纬度放置在地图上
        that.initp(map,that);
    },
    initp(map,that){
      // let me = that.sa;
      this.sa.ajax('/e-renter/parking-information/initp',
      {},
      function(res){
      this.parks = res.data;
      var parklist = this.parks;
      var pIcon = new BMap.Icon(require('./停车库.png'), new BMap.Size(32, 32));//创建停车图标图片大小

       for(let i=0;i<parklist.length;i++){
        var Longitude=parklist[i].longitude;
        var Latitude=parklist[i].latitude;
        var point = new BMap.Point(Longitude,Latitude);
        this.overlays.push(point);
        var marker = new BMap.Marker(point,{icon:pIcon});

        marker.addEventListener("click", function () {//添加该标记的点击事件
          let park = parklist[i];
          //调用模态框
          that.$refs['add-or-update'].open(that.uid,park);
        });
        map.addOverlay(marker);    //增加标记到地图
    }
      }.bind(this)),
      {"type":"get"}
    }

  }
 }
</script>

<style>
 #allmap{
  width: 100%;
  height: 100%;
 }
</style>
